<template>
	<div class="most-expected">
		<p class="title">近期最受期待</p>
		<div class="most-expected-list" v-show="this.mostlist.length!=0">
			<router-link :to="`/moviepage/${item.id}`" class="expected-item" v-for="item in mostlist" :key="item.id">
				<div class="poster">
					<img :src="$options.filters.src(item.img)" :alt="item.nm">
					<span class="wish">
						<span class="wish-num">{{item.wish}}</span>
						人想看
					</span>
					<div class="toggle-wish"><span></span></div>
				</div>

				<h5 class="name">{{item.nm}}</h5>

				<p class="date">{{item.comingTitle}}</p>
			</router-link>
		</div>

	</div>
</template>

<script>
export default {
	props:["mostlist"],
	filters: {
		src(value) {
			return value.replace('w.h', '100.138')
		}
	},
}
</script>

<style scoped="scoped" lang="less">
/deep/ .van-loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  // transform: translateY(-50%);
}
.most-expected {
	padding: 12px 15px;
	background-color: #fff;
	margin-bottom: 10px;
	position: relative;

	.title {
		font-size: 14px;
		color: #333;
		margin: 0 0 12px;
	}
}

.most-expected-list {
	overflow: scroll;
	white-space: nowrap;
}

.expected-item {
	display: inline-block;
	width: 85px;
	overflow: hidden;
	margin-right: 10px;

	.poster {
		width: 85px;
		height: 115px;
		position: relative;
		margin-bottom: 6px;
		background-color: #E1E1E1;
		background-size: 100% 100%;

		img {
			width: 100%;
			height: 100%;
		}

		.wish {
			position: absolute;
			left: 4px;
			bottom: 2px;
			color: #faaf00;
			font-size: 11px;
			font-weight: 600;

			span {
				font-size: 11px;
				font-weight: 600px;
			}
		}

		.toggle-wish {
			width: 28px;
			line-height: 28px;
			background: rgba(61, 63, 71, .6);
			text-align: center;
			border-bottom-right-radius: 10px;
			position: absolute;
			top: 0;
			left: 0;

			span {
				display: inline-block;
				width: 10px;
				height: 10px;
				background-size: 100%;
				background-repeat: no-repeat;
				background-image: url(../assets/img/notWish.png);


			}
		}
	}

	.name {
		font-size: 13px;
		color: #222;
		margin: 0 0 3px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.date {
		margin: 0;
		font-size: 12px;
		color: #999;
	}

}

.most-expected::-webkit-scrollbar {
	width: 0;
}
</style>
